<template>
  <div class="main">
    <input
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
      v-model="selectedAll"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <Item v-for="item in show" :key="item.id" :item="item"></Item>
    </ul>
  </div>
</template>

<script>
import Item from './item.vue';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'Section',
  components: {
    Item,
  },
  computed: {
    ...mapState(['todoList']),
    ...mapMutations(['SELECT_ALL']),
    //判断路径变化
    show() {
      switch (this.$route.path) {
        case '/':
          return this.todoList;
        case '/active':
          return this.todoList.filter((item) => !item.isDone);
        case '/completed':
          return this.todoList.filter((item) => item.isDone);
      }
    },

    //监听全选的变化
    selectedAll: {
      get() {
        return this.todoList.every((item) => item.isDone);
      },
      set(val) {
        this.SELECT_ALL(val);
      },
    },
  },
  mounted() {
    console.log(this.$route);
  },
};
</script>

<style></style>
